<template>
    <div>
        <h1 style="text-align:center;">需求查询</h1>
        <Row style="margin-top:20px;padding-bottom:20px;font-size:14px">
            <Col span="2">
                  <Button style="background-color:#143f87;color:white" size="large">需求查询</Button>
            </Col>
            <Col span="19" style="padding-left:8px">   
                <Input v-model="query_data.search_demand"  size="large">    
                </Input>
            </Col>
            <Col span="2">
                <Button style="background-color:#143f87;color:white" size="large" @click="handleSearch">搜索</Button>
            </Col>
        </Row>
        <Row :gutter="16" style="margin-bottom:20px">
            <Col span="4">
                <div>
                    <Select v-model="query_data.m_type" disabled clearable placeholder="请选择服务平台">
                        <Option value="0" key="0" selected>全部平台</Option>
                        <Option v-for="item in moduleTypeList.children" :value="item.name" :key="item.name">{{ item.name }}</Option>
                    </Select>
                </div>
            </Col>
            <Col span="4">
                <div>
                    <Select v-model="query_data.demandType" clearable placeholder="请选择服务类型">
                        <Option value="0" key="0" selected>全部服务</Option>
                        <Option v-for="item in demandTypeList.children" :value="item.name" :key="item.name">{{ item.name }}</Option>
                    </Select>
                </div>
            </Col>
            <Col span="4">
                <div>
                    <Select v-model="query_data.timeSelect" clearable placeholder="请选择时间段">
                        <Option value="0" :key="0">全部时间</Option>
                        <Option value="3" :key="3">三天内</Option>
                        <Option value="7" :key="7">一周内</Option>
                        <Option value="30" :key="30">一个月内</Option>
                        <Option value="90" :key="90">三个月内</Option>
                    </Select>
                </div>
            </Col>
            <Col span="3">
                <div>
                    <Select v-model="query_data.cities[0]" placeholder="请选择省份">
                        <Option v-for="item in citiesList" :value="item.name" :key="item.name">{{item.name}}</Option>
                    </Select>
                </div>
            </Col>
            <Col span="3">
                <div>
                    <Select v-model="query_data.cities[1]" placeholder="请选择城市">
                        <Option v-for="item in city_list" :value="item.name" :key="item.name" >{{item.name}}</Option>
                    </Select>
                </div>
            </Col>
            <Col span="3">
                <div>
                    <Select v-model="query_data.cities[2]" placeholder="请选择区县">
                        <Option v-for="item in area_list" :value="item.name" :key="item.name" >{{item.name}}</Option>
                    </Select>
                </div>
            </Col>
            <Col span="3">
                <Button style="background-color:#143f87;color:white" @click="areaclear">重新选择</Button>
            </Col>
        </Row>
        <Row>
            <Card v-for="item in demandList" class="content">
                <router-link :to="{name:'demand_detail',params:{id: item.id} }"  style="color:black">
                    <p solt="title">
                        <Row>
                            <Col span="20">
                                <h3>{{item.title}}</h3>
                            </Col>
                            <Col span="4">
                                <p style="margin-right:20px">时间：{{dateformat(item.create_time)}}</p>
                            </Col>                   
                        </Row>
                    </p>  
                    <Row style="margin-top:20px">
                        <Col span="10">
                            <p>需求介绍：{{formatContent(item.demand_content)}}</p>
                        </Col>
                        <Col span="10" >
                            <p>涉及领域：{{item.demand_industry.join("、")}}</p>
                        </Col>
                        <Col span="4">
                            <p>联系人：{{item.demand_master}}</p>
                            <p>联系电话：{{item.member.demand_tele}}</p>
                        </Col>
                    </Row>
                </router-link> 
            </Card>
            <div>
                <AutoPage v-model="page"></AutoPage>
            </div>
        </Row>
    </div>
</template>
<script>
import Vue from 'vue';
import Page from "@/common/model/Page";
import AutoPage from "@/common/components/AutoPage";
import Demand from "@/common/model/Demand";
export default {
    name: 'page',
    data(){
        var query_data = {
            cities:[],
            m_type: "0",
            demandType:'0',
            search_demand:'',
            timeSelect: '0'
        };
        return{
            page: new Page("search/demand_item", this.formatQueryData(query_data)),
            query_data: query_data
        }
    },
    methods:{
        handleSearch() {
            this.page.action_data = this.formatQueryData(this.query_data);
            this.page.getData();
        },
        areaclear(){
            this.query_data.cities[0]="";
            this.query_data.cities[0]="";
            this.query_data.cities[0]="";
            this.handleSearch();
        },
        dateformat(a){
            return new Date(parseInt(a)).toLocaleDateString()+" "+new Date(parseInt(a)).getHours()+":"+new Date(parseInt(a)).getMinutes();
        },
        formatQueryData(data) {
            var begin_time = "0000000000000";
            var end_time = Date.now();
            if(data.timeSelect != 0) begin_time = end_time - data.timeSelect*24*60*60*1000;
            return {
                search: data.search_demand,
                m_type: data.m_type,
                demand_type: data.demandType,
                area: data.cities.join(","),
                begin_time: begin_time,
                end_time: end_time
            }
        },
        formatContent(mes){
            if(mes.length>13){
                mes=mes.substring(0,13)+"……";
            }
            return mes;
        }
    },
    computed:{
        citiesList(){
            return this.$store.state.app.dicTree.area.children;
        },
        city_list(){
            for(var i=0;i<this.citiesList.length;i++){
                if(this.citiesList[i].name==this.query_data.cities[0]){
                    return this.citiesList[i].children;
                }
            }
            return [];
        },
        area_list(){
            for(var i=0;i<this.city_list.length;i++){
                if(this.city_list[i].name==this.query_data.cities[1]){
                    return this.city_list[i].children;
                }
            }
            return [];
        },
        demandTypeList(){
            return this.$store.state.app.dicTree.demand;
        },
        moduleTypeList(){
            return this.$store.state.app.dicTree.usual_service;
        },
        demandList() {
            return Demand.parseList(this.page.list);
        }
    },
    components:{
        AutoPage
    },
    mounted(){
        if(this.$route.query.type!=null){
            this.query_data.m_type=unescape(this.$route.query.m_type);
            this.query_data.demandType=unescape(this.$route.query.type);
            this.query_data.cities=this.$route.query.cities||[];
            for(var i=0;i<this.query_data.cities.length;i++){
                if(this.query_data.cities[i]==null){
                    this.query_data.cities[i]="";
                }
                else{
                    this.query_data.cities[i]=unescape(this.query_data.cities[i]);
                }
            }
            console.log("city+++++"+this.query_data.cities);
            this.query_data.timeSelect=this.$route.query.time;
            console.log("time+++++"+this.query_data.timeSelect);
            console.log("type of time +++"+typeof(this.query_data.timeSelect));
            this.query_data.search_demand=unescape(this.$route.query.searchitem || "");
            console.log(this.citiesList);
            this.handleSearch();
        }
    }
};
</script>
<style scoped>
    .content{
        margin-top: 5px;
        padding-bottom: 5px;
    }

</style>